<template>
  <div class="mainDiv my-div">
    <div class="rowHead" style="display: flex;height:100%">
      <el-tabs v-model="activeName" style="width: 100%">
        <el-tab-pane label="设置首页图片" name="first">
          <el-card :body-style="{ padding: '0px' }" style="width: 300px;margin: 0 auto;margin-top: 100px;">
            <el-upload class="avatar-uploader" action="" :show-file-list="false" :auto-upload="false" :on-change="changeImg">
              <img v-if="imageUrl" :src="imageUrl" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
            <div style="padding: 14px;">
              <span>头部图片</span>
              <div class="bottom clearfix">
                <time style="font-size: 12px">图片大小为300px * 200px</time>
                <el-button type="primary" size="mini" style="float:right" @click="saveHead">保存</el-button>
              </div>
            </div>
          </el-card>
        </el-tab-pane>
        <el-tab-pane label="设置门店信息" name="second">
          <el-card :body-style="{ padding: '0px' }" style="width: 400px;margin: 0 auto;margin-top: 100px;">
            <div style="width: 400px;height: 150px;background: #fff;border-radius: 5px;box-shadow: 0px 0px 10px 0px #c3c0c0;display:flex">
              <el-upload class="avatar-uploader" action="" :show-file-list="false" :auto-upload="false" :on-change="changeLogo" style="width: 100px;height:100px;padding: 25px;">
                <img v-if="logoUrl" :src="logoUrl" class="avatar-logo">
                <i v-else class="el-icon-plus avatar-uploader-icon-logo"></i>
              </el-upload>
              <div style="padding: 10px;width: 100%;">
                <p style="font-size: 16px; padding: 5px 0">
                  <el-input v-model="shopName" size="mini" placeholder="店铺名称"></el-input>
                </p>
                <p style="padding: 5px 0;font-size: 11px;color:rgb(115, 115, 115)">
                  <el-input type="textarea" size="mini" v-model="shopAddress" placeholder="店铺地址"></el-input>
                </p>
                <p style="padding: 5px 0; font-size: 12px">
                  <el-input v-model="shopPhone" size="mini" placeholder="联系电话"></el-input>
                </p>
              </div>
            </div>
            <div style="padding: 14px;">
              <span></span>
              <div class="bottom clearfix">
                <time style="font-size: 12px">logo大小为100px * 100px</time>
                <el-button type="primary" size="mini" style="float:right" @click="saveAddress">保存</el-button>
              </div>
            </div>
          </el-card>
        </el-tab-pane>
        <el-tab-pane label="设置门店介绍" name="third">
          <el-card :body-style="{ padding: '0px' }" style="width: 375px;margin: 0 auto;">
            <quill-editor v-model="content" ref="myQuillEditor" :options="editorOption" style="height:100%">
            </quill-editor>
            <div style="padding: 14px;">
              <span>主题内容</span>
              <div class="bottom clearfix">
                <time style="font-size: 12px">呈现在首页部分</time>
                <el-button type="primary" size="mini" style="float:right" @click="saveBody">保存</el-button>
              </div>
            </div>
          </el-card>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script>
  // import C from '@/common/common.js'
  import AdminEdit from '@/service/organization/adminEdit.js'
  import * as qiniu from 'qiniu-js'
  import C from '@/common/common.js'
  import {
    quillEditor
  } from 'vue-quill-editor'
  import 'quill/dist/quill.core.css'
  import 'quill/dist/quill.snow.css'
  import 'quill/dist/quill.bubble.css'
  const toolbarOptions = [
    ['bold', 'italic', 'underline', 'strike', 'blockquote', 'code-block', {
      'list': 'ordered'
    }, {
      'list': 'bullet'
    }, {
      'indent': '-1'
    }, {
      'indent': '+1'
    }, {
      'align': []
    }, {
      'size': ['small', false, 'large', 'huge']
    }, {
      'header': [1, 2, 3, 4, 5, 6, false]
    }, {
      'color': []
    }, {
      'background': []
    }, 'image', 'clean'] // toggled buttons
  ]
  export default {
    data () {
      let that = this
      return {
        imageUrl: '',
        logoUrl: '',
        imagefile: '',
        logoFile: '',
        shopName: '',
        shopAddress: '',
        shopPhone: '',
        loading: false,
        content: '',
        editorOption: {
          modules: {
            toolbar: {
              container: toolbarOptions, // 工具栏
              handlers: {
                'image': function (value) {
                  if (value) {
                    // 打开图片窗口
                    const {
                      dialog
                    } = require('electron').remote
                    dialog.showOpenDialog({
                      filters: [{
                        name: 'Images',
                        extensions: ['jpg', 'jpeg', 'png', 'gif']
                      }]
                    }, async (files) => {
                      if (files) {
                        console.log(files)
                        const fs = require('fs')
                        let file = fs.readFileSync(files[0])
                        console.log(file)
                        file = new Blob([file])
                        console.log(file)
                        if (file.size / (1024 * 1024) > 2) {
                          that.$message.error('上传图片大于2M')
                          return false
                        }
                        let token = await AdminEdit.getToken({})
                        let name = files[0].split('\\').pop()
                        let keyName =
                          new Date().getFullYear() +
                          '/' +
                          (new Date().getMonth() + 1) +
                          '/' +
                          new Date().getDate() +
                          '/' +
                          name
                        let observable = qiniu.upload(file, keyName, token.uptoken)
                        observable.subscribe({
                          next (res) {
                            console.log(res)
                          },
                          error (err) {
                            if (err) {
                              console.log(err)
                            }
                            that.$message.error('上传失败！')
                          },
                          complete (res) {
                            console.log(res)
                            // 上传成功后开始提交表格
                            let asd = `http://pde4eshzp.bkt.clouddn.com/${res.key}`
                            // that.submitForm()
                            let quill = that.$refs.myQuillEditor.quill
                            let length = quill.getSelection().index
                            quill.insertEmbed(length, 'image', asd)
                            quill.setSelection(length + 1)
                          }
                        })
                      }
                    })
                  } else {
                    this.quill.format('image', false)
                  }
                }
              }
            }
          }
        },
        activeName: 'first'
      }
    },
    async mounted () {
      let res = await C.ajax('/organization/xiaochengxu/getWeiXinConfig')
      console.log(res)
      this.imageUrl = res.indexbanner
      this.logoUrl = res.logoimg
      this.shopName = res.shopname
      this.shopAddress = res.shopaddress
      this.shopPhone = res.shopphone
      this.content = res.shopbody
    },
    methods: {
      async changeImg (file, fileList) {
        console.log(file)
        const isJPG =
          file.raw.type === 'image/jpeg' ||
          file.raw.type === 'image/png' ||
          file.raw.type === 'image/gif'
        const isLt2M = file.size / 1024 / 1024 < 2
        if (!isJPG) {
          this.$message.error('上传头像图片格式错误!')
          return
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!')
          return
        }
        this.imagefile = file
        this.imageUrl = file.url
      },
      async changeLogo (file, fileList) {
        console.log(file)
        const isJPG =
          file.raw.type === 'image/jpeg' ||
          file.raw.type === 'image/png' ||
          file.raw.type === 'image/gif'
        const isLt2M = file.size / 1024 / 1024 < 1
        if (!isJPG) {
          this.$message.error('上传图片格式错误!')
          return
        }
        if (!isLt2M) {
          this.$message.error('上传图片大小不能超过 1MB!')
          return
        }
        this.logoFile = file
        this.logoUrl = file.url
      },
      onEditorChange ({
        quill,
        html,
        text
      }) {
        console.log('editor change!', quill, html, text)
        this.content = html
      },
      async saveHead () {
        let that = this
        if (this.imagefile.name) {
          // 开始获取上传的token
          let token = await AdminEdit.getToken({})
          let keyName =
            new Date().getFullYear() +
            '/' +
            (new Date().getMonth() + 1) +
            '/' +
            new Date().getDate() +
            '/' +
            this.imagefile.name
          let observable = qiniu.upload(this.imagefile.raw, keyName, token.uptoken)
          observable.subscribe({
            next (res) {
              console.log(res)
            },
            error (err) {
              if (err) {
                console.log(err)
              }
              this.loading = false
              that.$message.error('上传失败！')
            },
            async complete (res) {
              console.log(res)
              // 上传成功后开始提交表格
              that.imageUrl = `http://pde4eshzp.bkt.clouddn.com/${res.key}`
              let data = {
                indexbanner: that.imageUrl
              }
              let resdata = await C.ajax('/organization/xiaochengxu/saveIndexBanner', data, 'post')
              if (resdata) {
                that.$message.success(resdata.data)
              } else {
                that.$message.error(resdata.data)
              }
            }
          })
        }
      },
      async saveAddress () {
        let that = this
        if (this.logoFile.name) {
          // 开始获取上传的token
          let token = await AdminEdit.getToken({})
          let keyName =
            new Date().getFullYear() +
            '/' +
            (new Date().getMonth() + 1) +
            '/' +
            new Date().getDate() +
            '/' +
            this.logoFile.name
          let observable = qiniu.upload(this.logoFile.raw, keyName, token.uptoken)
          observable.subscribe({
            next (res) {
              console.log(res)
            },
            error (err) {
              if (err) {
                console.log(err)
              }
              this.loading = false
              that.$message.error('上传失败！')
            },
            async complete (res) {
              console.log(res)
              // 上传成功后开始提交表格
              that.logoUrl = `http://pde4eshzp.bkt.clouddn.com/${res.key}`
              let data = {
                logoimg: that.logoUrl,
                shopname: that.shopName,
                shopaddress: that.shopAddress,
                shopphone: that.shopPhone
              }
              let resdata = await C.ajax('/organization/xiaochengxu/saveIndexBanner', data, 'post')
              if (resdata) {
                that.$message.success(resdata.data)
              } else {
                that.$message.error(resdata.data)
              }
            }
          })
        } else {
          let data = {
            shopname: this.shopName,
            shopaddress: this.shopAddress,
            shopphone: this.shopPhone
          }
          let res = await C.ajax('/organization/xiaochengxu/saveIndexBanner', data, 'post')
          if (res) {
            this.$message.success(res.data)
          } else {
            this.$message.error(res.data)
          }
        }
      },
      async saveBody () {
        let data = {
          shopbody: this.content
        }
        let res = await C.ajax('/organization/xiaochengxu/saveIndexBanner', data, 'post')
        if (res) {
          this.$message.success(res.data)
        } else {
          this.$message.error(res.data)
        }
      }
    },
    components: {
      quillEditor
    }
  }
</script>

<style>
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 300px;
    height: 200px;
    line-height: 200px;
    text-align: center;
  }
  .avatar-uploader-icon-logo {
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
  }
  .avatar-uploader-icon-bg {
    font-size: 28px;
    color: #8c939d;
    width: 100%;
    height: 200px;
    line-height: 200px;
    text-align: center;
  }
  .avatar {
    width: 300px;
    height: 200px;
    display: block;
  }
  .avatar-logo {
    width: 100px;
    height: 100px;
    display: block;
  }
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }
  .my-div {
    color: #000;
  }
  #iphone {
    width: 352px;
    height: 588px;
    position: relative;
    display: inline-block;
    border: 1px solid #000;
    border-radius: 40px;
    padding: 70px 10px;
    flex-shrink: 0;
  }
  #iphone:before {
    position: absolute;
    top: 30px;
    left: 50%;
    content: "";
    display: inline-block;
    width: 80px;
    height: 8px;
    margin-left: -40px;
    border: 1px solid #000;
    border-radius: 8px;
  }
  #iphone:after {
    position: absolute;
    left: 50%;
    bottom: 15px;
    content: "";
    display: block;
    width: 40px;
    height: 40px;
    margin-left: -20px;
    border: 1px solid #000;
    border-radius: 50%;
  }
  .ql-editor{
    height: 325px
  }
  .ql-toolbar.ql-snow .ql-formats {
      margin-right: 0px;
  }
</style>
